<template>
  <div class="mainBox">
      <div class="container">
        <el-row :gutter="20">
          <el-col :span="4">
            <span></span>
            <el-input style="" v-model="searchParam.keyword" clearable placeholder="IP 关键字" @keyup.enter.native="getProxiesListFunc"></el-input>
          </el-col>
          <el-col :span="2" >
            <el-button type="primary" :loading="loading" @click="getProxiesListFunc" size="small" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="3" :offset="14">
            <!-- 添加代理 -->
            <el-button  type="primary" @click="openDialog" size="small" icon="el-icon-plus">添加代理</el-button>
          </el-col>
        </el-row>
      </div>

    <!--Table -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        label="No."
        type="index"
        :index="indexMethod"
        width="60"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="IP"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="expire_time"
        label="到期时间"
        align="center"
        width="180">
      </el-table-column>
      <!--
      <el-table-column
        prop="username"
        label="用户名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="用户密码"
        align="center"
        width="160">
      </el-table-column>
      <el-table-column
        prop="port"
        label="端口"
        align="center">
      </el-table-column>
      -->
      <el-table-column
        prop="account_number"
        label="绑定帐号"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="task_number"
        label="任务总数"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="task_pending_number"
        label="待执行任务数"
        align="center"
        width="120">
      </el-table-column>
       <el-table-column
        prop="task_detail_number"
        label="子任务总数"
        align="center"
         width="100">
      </el-table-column>
      <el-table-column
        prop="task_detail_success_number"
        label="子任务成功数"
        align="center"
         width="120">
      </el-table-column>
      <el-table-column
        prop="task_detail_failed_number"
        label="子任务失败数"
        align="center"
         width="120">
      </el-table-column>
      <el-table-column
        label="子任务成功率"
        align="center"
        width="120">
          <template slot-scope="scope">
            {{scope.row.success_rate}}%
          </template>
      </el-table-column>
      <el-table-column
        prop="update_at"
        label="更新时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column label="操作"  align="center" fixed="right" width="">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-show="total" class="pagination-container" style="margin-top: 20px;">
      <el-pagination
        background
        class="pagination-container" style="margin-top: 20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParam.page"
        :page-sizes="[10,20,50,100]"
        :page-size="searchParam.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- dialog 添加代理-->
      <el-dialog title="代理" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="form" :rules="rules" ref="addProxieForm" label-width="120px" style="">
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名称" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" auto-complete="off" :maxlength="10"></el-input>
          </el-form-item>
           <el-form-item label="IP" prop="ip">
            <el-input v-model="form.ip" placeholder="请输入IP" auto-complete="off" :maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="端口" prop="port">
            <el-input v-model="form.port" placeholder="请输入端口" auto-complete="off" :maxlength="5"></el-input>
          </el-form-item>
          <el-form-item label="有效期至" prop="expire_time">
            <el-date-picker
              v-model="form.expire_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('addProxieForm')">保存</el-button>
            <el-button @click="resetForm('addProxieForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {getProxiesList, proxieDetail, addProxie, updateProxie, delProxie} from '@/api/proxies'
import { mapGetters } from 'vuex'
export default{
  data() {
    return {
      tableData:[],
      loading: true,
      total:0,
      searchParam:{
        page: 1,
        per_page: 10,
        keyword: ''
      },
      dialogFormVisible: false,
      form:{
        username: '',
        password:'',
        ip: '',
        port: '',
        expire_time: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          { min: 7, max: 15, message: '长度在 7 到 15 位'},
          {validator:function(rule,value,callback){
              if (!(/^(\d{1,3}\.){3}\d{1,3}$/.test(value))) { 
                  callback("IP格式错误，必须为数字和'.'组成");
              }else {
                  callback();
              }
          }}
        ],
        port: [
          { required: true, message: '请输入端口', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 位'},
          {validator:function(rule,value,callback){
              if (!(/^\d{2,5}$/.test(value))) { 
                  callback('端口必须为数字');
              }else {
                  callback();
              }
          }}
        ],
        expire_time: [
          { required: true, message: '请选择代理时间', trigger: 'blur' }
        ]
      },
      operType: 1, // 1 add; 2 update
      userId:''
    }
  },
  created(){
    this.getProxiesListFunc()
  },
  methods: {
    //获取代理池list
    getProxiesListFunc(){
      this.loading = true
      getProxiesList(this.searchParam, response=> {
        const res = response.data
        if(res.code == 1){
          this.tableData = (res.data).items
          this.total = (res.data).total
          if((res.data).page > (res.data).pages && (res.data).pages !== 0){
            this.searchParam.page = (res.data).pages
            this.getProxiesList()
          }
        }
        this.loading = false
      })
    },
    //保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.operType == 1){
            this.addProxieFun()
          }else{
            this.updateProxieFun()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //新增
    addProxieFun(){
      addProxie(this.form, response=> {
        const res = response.data;
        if(res.code == 1){
          this.$message.success('添加成功')
          this.dialogFormVisible = false
          this.getProxiesListFunc();
        }
      })
    },
    //更新
    updateProxieFun(){
      updateProxie(this.userId, this.form, response=> {
        const res = response.data;
        if(res.code === 1){
          this.$message.success('更新成功')
          this.getProxiesListFunc();
          this.dialogFormVisible = false
        }
      })
    },
     //编辑
    handleEdit(index, row) {
      this.userId = row.id
      this.operType = 2
      proxieDetail(row.id, response=> {
        const res = response.data;
        if(res.code === 1){
          const data = res.data
          this.form.username = data.username
          this.form.password = data.password
          this.form.ip = data.ip
          this.form.port = data.port
          this.form.expire_time = data.expire_time
         
          this.dialogFormVisible = true
        }
      })
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delProxie(row.id, response=> {
            if(response.status == 200){
              this.getProxiesListFunc()
              this.$message.success('删除成功')
            }
          })
        }).catch(() => {
        });
    },
    handleSizeChange(val) {
      this.searchParam.per_page = val
      this.getProxiesListFunc()
    },
    handleCurrentChange(val) {
      this.searchParam.page = val
      this.getProxiesListFunc()
    },
    indexMethod(index) {
      let No = (this.searchParam.page -1) * this.searchParam.per_page
      return No + (index + 1)
    },
    //dialog open
    openDialog(){
      this.dialogFormVisible = true
    },
    //dialog close
    closeDialog(){
      this.operType = 1
      this.resetForm('addProxieForm')
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.form.username = ''
      this.form.password = ''
      this.form.ip = ''
      this.form.port = ''
      this.form.expire_time = ''
    }
  },
  filters:{
  },
  components:{
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .mainBox{
    padding: 0px;
    margin-bottom: 20px;
  }
  .container {
    margin: 10px 0px;
  }
</style>
